<template>
  <div>
    <el-container>
      <el-aside>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          :style="{ height: leftHeight }"
        >
          <el-col></el-col>
          <el-col>
            <el-row></el-row>
            <el-row></el-row>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          :style="{ height: leftHeight }"
          v-for="item in lineData"
          :key="item.id"
        >
          <el-col
            :span="18"
            class="leftbox"
            >{{ item.name }}</el-col
          >
          <el-col
            :span="6"
            class="rightbox"
          >
            <el-row class="ss">{{ item.leftLine }}</el-row>
            <el-row class="ss">{{ item.rightLine }}</el-row>
          </el-col>
        </el-row>
      </el-aside>
      <el-main ref="mainBox">
        <div class="siteNameTitle">
          <div
            class="siteName"
            v-for="item in siteData"
            :key="item.id"
            :style="{ backgroundColor: item.color, width, lineHeight }"
          >
            {{ item.name }}
          </div>
        </div>
        <el-row
          :style="{ height: leftHeight }"
          v-for="item in lineData"
          :key="item.id"
          class="lineDiv"
        >
          <el-col class="line">
            <div
              style="background-color: rgb(23, 85, 219)"
              class="progressDiv"
              :style="{
                width: item.leftLineProgress + 'px',
                left: item.leftStart + 'px',
              }"
            ></div>
          </el-col>
          <el-col class="line">
            <div
              style="background-color: rgb(239, 185, 29)"
              class="progressDiv"
              :style="{
                width: item.rightLineProgress + 'px',
                left: item.rightStart + 'px',
              }"
            ></div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      siteData: [
        {
          id: 1,
          name: '璧山站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 2,
          name: '虎溪站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 3,
          name: '大学城南站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 4,
          name: '寨山坪站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 5,
          name: '西永站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 6,
          name: '瓷器口站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 7,
          name: '沙坪坝站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 8,
          name: '石桥铺站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 9,
          name: '大坪西站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 10,
          name: '西部站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 11,
          name: '后堡站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 12,
          name: '南坪站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 13,
          name: '广福大道站',
          color: 'rgb(7, 106, 219)',
        },
        {
          id: 14,
          name: '重庆东站',
          color: 'rgb(7, 106, 219)',
        },
      ],
      lineData: [
        {
          id: 1,
          name: '铺轨',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '100',
          rightStart: '120',
          leftLineProgress: '300',
          rightLineProgress: '300',
        },
        {
          id: 2,
          name: '焊轨',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '0',
          rightStart: '0',
          leftLineProgress: '0',
          rightLineProgress: '0',
        },
        {
          id: 3,
          name: '浇筑边坡',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '0',
          rightStart: '0',
          leftLineProgress: '0',
          rightLineProgress: '0',
        },
        {
          id: 4,
          name: '浇筑道床',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '80',
          rightStart: '60',
          leftLineProgress: '200',
          rightLineProgress: '50',
        },
        {
          id: 5,
          name: '水沟进度',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '0',
          rightStart: '0',
          leftLineProgress: '0',
          rightLineProgress: '0',
        },
        {
          id: 6,
          name: '疏散平台',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '0',
          rightStart: '0',
          leftLineProgress: '0',
          rightLineProgress: '0',
        },
        {
          id: 7,
          name: '轨道精调',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '0',
          rightStart: '0',
          leftLineProgress: '0',
          rightLineProgress: '0',
        },
        {
          id: 8,
          name: '线路标识',
          leftLine: '左线',
          rightLine: '右线',
          leftStart: '0',
          rightStart: '0',
          leftLineProgress: '0',
          rightLineProgress: '0',
        },
      ],
      width: '',
      lineHeight: '',
      leftHeight: '',
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let len = Number(this.siteData.length)
      let width = Number(this.$refs.mainBox.$el.offsetWidth)
      this.width = `${(width - (len - 1) * 2 * 10) / len}` + 'px'

      this.lineHeight = `${(width - (len - 1) * 2 * 10) / len / 2}` + 'px'
      console.log('::: ', (width - (len - 1) * 2 * 10) / len / 2 + 40)
      this.leftHeight = `${(width - (len - 1) * 2 * 10) / len / 2 + 40}` + 'px'

      let leftbox = document.getElementsByClassName('leftbox')
      let lineEl = document.getElementsByClassName('line')
      let ssEl = document.getElementsByClassName('ss')
      leftbox[leftbox.length - 1].style.borderBottom = '1px solid black'
      lineEl[lineEl.length - 1].style.borderBottom = '1px solid black'
      ssEl[ssEl.length - 1].style.borderBottom = '1px solid black'
      ssEl[ssEl.length - 2].style.borderBottom = '1px solid black'
    },
  },
}
</script>

<style lang="less" scope>
.leftbox {
  box-sizing: border-box;
  height: 100%;
  padding-top: 12%;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid black;
  border-bottom: 0;
  text-align: center;
}
.rightbox {
  box-sizing: border-box;
  height: 100%;
  border-top: 1px solid black;
  border-right: 1px solid black;

  border-left: 0;
  .el-row {
    height: 50%;
    padding-top: 20%;
    text-align: center;
  }
  .el-row:first-child {
    border-bottom: 1px solid black;
  }
}
.lineDiv {
  border: 1px solid black;
  border-bottom: 0;
}

.line {
  height: 50%;
}
.line:last-child {
  border-top: 1px solid black;
}
.progressDiv {
  height: calc(100% - 2px);
  margin-top: 1px;
  position: relative;
}

.siteNameTitle {
  display: flex;
  flex-wrap: nowrap;

  margin-bottom: 20px;
  .siteName {
    color: white;
    border-radius: 4px;
    text-align: center;
    aspect-ratio: 2/1;
    margin-left: 10px;
    margin-right: 10px;
  }
  .siteName:first-child {
    margin-left: 0;
  }
  .siteName:last-child {
    margin-right: 0;
  }
}
</style>
